<!-- 
 @Author: LW  
 @Date: 2021-01-08 11:30:38  
 @function: 用户编辑框
 -->
<template>
  <div>
    <!-- ref相当于Id:model是表单内容-->
    <el-form label-width="120px" ref="modifyInfo" :rules="formInfoRules" :model="formInfo">
      <el-row>
        <el-col :span="8">
          <div class="image-header">
            <el-row>
              <img :src="formData.pictureurl" class="bgimg" alt />
            </el-row>
            <el-row>
              <el-button
                size="mini"
                type="primary"
                style="width:110px"
                :loading="loading"
                @click="uploadHeader()"
              >上传头像</el-button>
            </el-row>
          </div>
        </el-col>
        <el-col :span="8">
          <el-form-item label="账号：" prop="name">
            <label slot="label">账&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号：</label>
            <el-input v-model="formInfo.name" autocomplete="off" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="实际姓名：" prop="realname">
            <el-input v-model="formInfo.realname" autocomplete="off" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="手机号码：" prop="mobile_phone">
            <el-input v-model="formInfo.mobile_phone" autocomplete="off" size="mini"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="密码：">
            <label slot="label">密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：</label>
            <el-input type="password" v-model="formInfo.password" autocomplete="off" size="mini" :disabled="inputDisabled"></el-input>
          </el-form-item>
          <el-form-item label="确认密码：">
            <el-input type="password" v-model="formInfo.repassword" autocomplete="off" size="mini" :disabled="inputDisabled"></el-input>
          </el-form-item>
          <el-form-item label="身份证号：" prop="idnumber">
            <el-input v-model="formInfo.idnumber" autocomplete="off" size="mini"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="性别：" prop="gender">
            <label slot="label">性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别：</label>
            <el-radio-group v-model="formInfo.gender">
              <el-radio label="男">男</el-radio>
              <el-radio label="女">女</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="邮箱：">
            <label slot="label">邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱：</label>
            <el-input v-model="formInfo.email" autocomplete="off" size="mini"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-form-item label="所属部门：">
            <Treeselect
                :options="listData.listDepartmentData"
                :normalizer="normalizer"
                v-model="formInfo.departmentList"
                placeholder="请选择所属部门"
                clearable          
              >
            </Treeselect>
        </el-form-item>
        <el-form-item label="所属岗位：">
          <el-select v-model="formInfo.postList" multiple  style="width: 100%" size="mini" >
              <el-option
                v-for="item in listData.listPostData"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              ></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="所属角色：">
            <el-select v-model="formInfo.roleList" multiple style="width: 100%" size="mini">
              <el-option
                v-for="item in listData.listRoleData"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              ></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="用户描述：">
          <el-input
            type="textarea"
            v-model="formInfo.user_describe"
            rows="3"
            autocomplete="off"
            maxlength="200"
            show-word-limit
            size="mini"
          ></el-input>
        </el-form-item>
      </el-row>
    </el-form>
    <div slot="footer " class="el-dialog__footer">
      <el-button size="mini" @click="closeDialog()">取消</el-button>
      <el-button size="mini" type="primary" :loading="loading" @click="submitForm('modifyInfo')">保存</el-button>
    </div>

    <el-dialog
      :title="editForm.formTitle"
      :visible.sync="editForm.formVisible"
      v-if="editForm.formVisible"
      :width="editForm.width"
      :modal="false"
      v-dialogDrag
      custom-class="dialog"
      :close-on-click-modal="false"
    >
      <ImageCropperForm  v-bind:imageUploadInfo="mediaInfo" @callBack="callBack"></ImageCropperForm>
    </el-dialog>
  </div>
</template>
<script>
import md5 from 'js-md5';
import UserHttp from "@/api/authority/user"; //http
import ImageCropperForm from "@/components/common/imageCropper"; //图片上传

import Treeselect from "@riophae/vue-treeselect";//多选组件
import "@riophae/vue-treeselect/dist/vue-treeselect.css";//import the styles

//定义变量
const {
  addInfo, //增加数据
  modifyInfo, //编辑数据
} = UserHttp;

export default {
  //组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据，需要通过子组件的 props 选项
  //在模板中，要动态地绑定父组件的数据到子模板的 props，与绑定到任何普通的HTML特性相类似，就是用 v-bind。每当父组件的数据变化时，该变化也会传导给子组件
  props: ["formInfo","listData"], //父界面v-bind:editInfo一致
  components: {
    ImageCropperForm,
    Treeselect
  },
  data() {
    return {
      loading: false, //是显示加载
      formData: {
        pictureurl: require("@/assets/images/userpic.jpg")
      },
      inputDisabled:false,//密码输入框是否有效
      //编辑框窗体参数
      editForm: {
        formVisible: false, //窗体是否显示
        formTitle: "", //窗体标题
        width: ""
      },
      mediaInfo: {
        servicePath:this.$store.getters.filesPath.service.basic_service,
        uploadFolder:this.$store.getters.filesPath.folder.sys_user_picture, 
        originalPic:"",
        width: 120,
        height: 120,
      },
      normalizer(node) {
        //转换分类树状信息列的格式
        //去掉children=[]的children属性
        if (node.children && !node.children.length) {
          delete node.children;
        }
        return {
          id: node.id,
          label: node.title,
          children: node.children,
        };
      },
      //验证对象，由Rules结尾
      formInfoRules: {
        mobile_phone: [
          {
            required: true,
            message: "手机号不能为空",
            trigger: "blur"
          }
        ],
        idnumber:[
          {
            required: true,
            message: "身份证号不能为空",
            trigger: "blur"
          }
        ],
        gender:[
          {
            required: true,
            message: "性别不能为空",
            trigger: "blur"
          }
        ],
        name: [
          {
            required: true,
            min: 1,
            max: 50,
            message: "账号不能为空，最大长度为50",
            trigger: "blur"
          }
        ],
        realname: [
          {
            required: true,
            message: "实际姓名不能为空",
            trigger: "blur"
          }
        ]
      }
    };
  },
  /**html加载完成之前，执行。执行顺序：父组件-子组件 */
  created() {},
  /**[页面初始化方法]html加载完成后执行。执行顺序：子组件-父组件*/
  mounted() {
    //初始化
    this.initForm();
  },
  methods: {
    //初始化
    initForm() {
      if (
        this.formInfo.picture_url != undefined &&
        this.formInfo.picture_url != "" &&
        this.formInfo.picture_url != null
      ) {
        this.formData.pictureurl =this.$store.getters.fileServerURI+ this.formInfo.picture_url;
      }
      if (this.formInfo.password!=null&&this.formInfo.password!=undefined) {
        this.inputDisabled=true;
      }
    },
    /////////////////头像操作
    //上传头像
    uploadHeader() {
      this.editForm.formVisible = true;
      this.editForm.formTitle = "上传头像信息";
      this.editForm.width = "35%";
    },
    //上传返回信息
    callBack(info) {
      this.editForm.formVisible = false;
      if (info) {
        this.formData.pictureurl=this.$store.getters.fileServerURI+info.path;
        this.formInfo.picture_url=info.path;
      }  
    },
    //关闭增加弹出框
    closeDialog() {
      this.$emit("callBack", null);
    },
    //保存信息
    submitForm(modifyRef) {
      let self = this;
      this.$refs[modifyRef].validate(valid => {
        if (valid) {
          let par = this.formInfo;
          if(par.departmentList==null||par.departmentList==""){
            par.departmentList=[];
          }else{
            if (!(par.departmentList instanceof Array)) {
              par.departmentList=par.departmentList.split(",");
            }
          }  
          if (this.formInfo.id != null && this.formInfo.id != "") {
            modifyInfo(par).then(response => {
              let data = response.data;
              if (data.Code === 1000) {
                self.$messageTip.success(data.Msg); 
                self.$emit("callBack", data.Code);
              } else {
                self.$messageTip.warning(data.Msg); 
              }
            });
          } else {
            if (this.formInfo.password!=null&&this.formInfo.password!=undefined&&this.formInfo.password==this.formInfo.password) {
                  par.password=md5(par.password);
                  par.repassword=md5(par.repassword);
                  addInfo(par).then(response => {
                    let data = response.data;
                    if (data.Code === 1000) {
                      self.$messageTip.success(data.Msg);  
                      self.$emit("callBack", data.Code);
                    } else {
                      self.$messageTip.warning(data.Msg); 
                    }
                  });
                }else{
                  self.$messageTip.warning("两次密码必须输入一致！"); 
                }
            }
        } else {
          return false;
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.image-header {
  min-height: 120px;
  margin-left: 110px;
}
.image-header .bgimg {
  height: 120px;
  width: 120px;
}
</style>
<style  >
  .vue-treeselect {
    top: 5px;
  }
  .vue-treeselect__control,
  .vue-treeselect__input-container {
    height: 28px !important;
  }

  .vue-treeselect__placeholder,
  .vue-treeselect__input,
  .vue-treeselect__single-value {
    line-height: 28px;
    font-size: 12px;
  }
</style>